<template>
  <div class="container">
    <div class="cont-header">
      <div class="info-item">
        <img class="pic" :src="theme.headUrl" alt="" />
        <div class="info">
          <div class="name">
            <p>
              {{ theme.name }}
              <!-- <i class="iconf iconbianji"></i> -->
            </p>
            <div class="operation">
              <button class="btn update" @click="linkCreateTheme">添加档案</button>
              <!-- <a href="javascript:;" class="btn down">导出报告</a> -->
            </div>
          </div>
          <p class="time">
            {{ "大法师的发送到发斯蒂芬" }}
          </p>
          <div class="label">
            <p
              class="label-list"
              :class="LabelshowAll ? 'overf' : ''"
              ref="labelList"
            >
              <span v-for="(item, index) in theme.label" :key="index">{{
                item
              }}</span>
            </p>
            <div class="label-set">
              <!-- <i class="iconf iconbianji"></i> -->
              <span
                class="more"
                v-if="LabelButtonShow"
                @click="LabelshowAll = !LabelshowAll"
              >
                查看更多<i
                  :class="[
                    'jt',
                    'el-icon-d-arrow-right',
                    !LabelshowAll ? 'rot' : '',
                  ]"
                ></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cont-body">
      <div class="body-left">
        <div class="body-left-top">
          <div class="search">
            <input
              v-model="searchMsg"
              type="text"
              placeholder="在档案库中查找内容"
              autocomplete="off"
            />
            <i class="icon el-icon-search" @click="_GetRecord(false)"></i>
          </div>
          <div class="btn-box">
            <el-button
              class="back"
              type="primary"
              size="small"
              icon="el-icon-arrow-left"
              @click="fback"
              >返回全部</el-button
            >
            <div class="filter-time" @click="setSort">
              <span class="txt">更新时间</span>
              <div class="icon-box">
                <i
                  :class="update_sort == 1 ? 'active' : ''"
                  class="icon el-icon-caret-top"
                ></i>
                <i
                  :class="update_sort == 2 ? 'active' : ''"
                  class="icon el-icon-caret-bottom"
                ></i>
              </div>
            </div>
          </div>
        </div>
        <ul class="item-ul" v-loading="loading">
          <li class="info-item" v-for="(item, index) in DataList" :key="index">
            <img class="pic" :src="item.headUrl" alt="" />
            <div class="info">
              <div class="name">
                {{ item.entityName }}
              </div>
              <div class="label-list">
                <span
                  v-for="(label, indexs) in item.relationTypeList"
                  :key="indexs"
                  >{{ label }}</span
                >
              </div>
              <p class="txt ellipsis2">
                {{ item.evidence }}
              </p>
            </div>
          </li>
        </ul>
        <no-data :length="DataList.length" :loading="loading"></no-data>
        <div class="pagination">
          <el-pagination
            :hide-on-single-page="isShow"
            class="pagination"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="10"
            @current-change="handleChangeNum"
          >
          </el-pagination>
        </div>
      </div>
      <div class="body-right">
        <div class="chart-box">
          <col-bar
            id="relationship"
            title="职业分布"
            :yAxisData="gxYAxisData"
            :seriesData="gxSeriesData"
          ></col-bar>
        </div>
        <div class="chart-box">
          <pie id="address" title="地域分布" :seriesData="dySeriesData"></pie>
        </div>
        <div class="chart-box">
          <bar
            id="label"
            title="标签分布"
            :xAxisData="bqYAxisData"
            :seriesData="bqSeriesData"
          ></bar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  SynopsisDetails,
  QueryThemeBasicInfo,
  ThemePropertyAnalysis,
} from "@/api/theme";
import { tipErr, tipSuc, tipWarn, formatDate } from "@/utils/index";

export default {
  data() {
    return {
      searchMsg: "",
      loading: false,
      total: 100,
      pageSize: 10,
      pageNum: 1,
      entityId: null, //人物id
      entityType:'',//主题类型
      LabelButtonShow: false, //查看更多按钮显示开关
      LabelshowAll: false, //标签全部显示开关
      /* 人物基本信息 */
      theme: {
        name: "",
        label: [],
        organization: "",
      },
      update_sort: 1,
      DataList: [],
      //职业分布数据
      gxYAxisData: [],
      gxSeriesData: [],
      //地域分布
      dySeriesData: [],
      //标签分布数据
      bqYAxisData: [],
      bqSeriesData: [],
    };
  },
  computed: {
    isShow() {
      return this.DataList.length <= 10 ? true : false;
    },
  },
  created() {
    this.entityId = this.$route.query.entityId;
    this.entityType = this.$route.query.entityType;
    this.theme.name = this.$route.query.name;
    this.theme.organization = this.$route.query.organization;
    this._SynopsisDetails();
    this._QueryThemeBasicInfo();
    this._ThemePropertyAnalysis();
  },
  async mounted() {},
  methods: {
    linkCreateTheme() {
      this.$router.push({
        name: "createtheme",
      });
    },
    _UpdateProperty() {
      const name = this.theme.name;
      this.$prompt("姓名", "修改名字", {
        inputValue: name,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: function(msg) {
          if (msg) return true;
          else return false;
        },
        inputErrorMessage: "内容不能为空",
      })
        .then(async ({ value }) => {
          let { data, code, msg } = await UpdateProperty({
            entityId: this.entityId,
            newPropertyValue: value,
            oldPropertyValue: this.theme.name,
            propertyKey: "THEME_NAME",
          });
          if (code == 1) {
            tipSuc('修改成功')
            this.theme.name = value;
          } else {
            tipErr(msg);
          }
        })
        .catch(() => {});
    },
    async _SynopsisDetails() {
      let { data, code, msg } = await SynopsisDetails({
        entityId: this.entityId,
        twitter: false,
        langType: "zh",
        type: "THEME",
      });
      if (code == 1) {
        data.updateTime = formatDate(data.updateTime, "yy-MM-dd hh:mm:ss");
        this.theme = Object.assign(this.theme, data);
        this.$nextTick(function() {
          let height = this.$refs.labelList.offsetHeight;
          if (height && height > 50) {
            this.LabelButtonShow = true;
            this.LabelshowAll = true;
          }
        });
      } else {
        tipErr(msg);
      }
    },
    async _GetRecord() {
      if (!this.searchMsg) {
        tipWarn("请输入搜索内容！");
        return;
      }
      this.pageNum = 0;
      this._QueryThemeBasicInfo(this.pageNum, {
        searchContent: this.searchMsg,
      });
    },
    async _QueryThemeBasicInfo(index, obj) {
      if (this.loading) return;
      this.loading = true;
      let param = {
        entityId: this.entityId,
        rows: 10,
        start: index ? index * 10 : 0,
        entityType: "THEME",
        influenceType: 0,
      };
      if (obj) {
        param = Object.assign(param, obj);
      }
      let { data, code, msg, total } = await QueryThemeBasicInfo(param);
      this.loading = false;
      if (code == 1) {
        data.forEach((item) => {
          for (let i = 0; i < item.relationTypeList.length; i++) {
            item.relationTypeList[i] = this.setLabelTxt(
              item.relationTypeList[i]
            );
          }
        });
        this.DataList = [...data];
        this.total = total;
      } else {
        tipErr(msg);
      }
    },
    async _ThemePropertyAnalysis() {
      let { data, code, msg } = await ThemePropertyAnalysis({
        entityId: this.entityId,
        entityType: this.entityType=='THEME_PER'?"PER_PER":this.entityType=='THEME_ORG'?'ORG_ORG':'ATW_ATW',
        influenceType: 0,
        rows: 10,
        start: 0,
      });
      if (code == 1) {
        let bqYAxisData = [],
          bqSeriesData = [];
        if (data.PER_LABEL != null) {
          data.PER_LABEL.forEach((item) => {
            bqYAxisData.push(item.name);
            bqSeriesData.push(item.value);
          });
          data.PER_WORK_PLACE_P
        }
        this.dySeriesData = [...(data.PER_WORK_PLACE_P || [])];
        this.bqYAxisData = [...bqYAxisData];
        this.bqSeriesData = [...bqSeriesData];
      } else {
        tipErr(msg);
      }
    },
    handleChangeNum(index) {
      this._getPersonList(index - 1);
    },
    setSort() {
      if (this.update_sort != 1) {
        this.update_sort = 1;
        this.DataList.sort((a, b) => {
          return a.updateTime - b.updateTime;
        });
      } else if (this.update_sort != 2 && this.update_sort != 0) {
        this.update_sort = 2;
        this.DataList.sort((a, b) => {
          return b.updateTime - a.updateTime;
        });
      }
    },
    setLabelTxt(txt) {
      let msg;
      if (txt == "PER_linked_THEME") {
        msg = "实体关联主题";
      } else if (txt == "PER_relatives_PER") {
        msg = "亲属关系";
      } else if (txt == "PER_work_PER") {
        msg = "亲属关系";
      } else if (txt == "PER_be_mention_PER") {
        msg = "被提及";
      } else if (txt == "PER_friend_PER") {
        msg = "朋友关系";
      } else if (txt == "PER_management_ORG") {
        msg = "管理层";
      } else if (txt == "PER_cooperation_ORG") {
        msg = "合作关系";
      } else if (txt == "ORG_competition_ORG") {
        msg = "对立关系";
      } else if (txt == "PER_competition_ORG") {
        msg = "对立关系";
      } else if (txt == "ATW_competition_ORG") {
        msg = "对立关系";
      } else if (txt == "a") {
        msg = "1-50";
      } else if (txt == "b") {
        msg = "50-100";
      } else if (txt == "c") {
        msg = "100-200";
      } else if (txt == "d") {
        msg = "200-500";
      } else if (txt == "e") {
        msg = "500次以上";
      }
      return msg;
    },
    fback() {
      this.$router.push({
        name: "themes",
      });
    },
  },
};
</script>

<style lang="scss" scoped src="@/assets/css/detail.scss"></style>
<style lang="scss" scoped>
.body-left {
  &-top {
    width: 100%;
    background: #1f2025;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;
    box-sizing: border-box;
    .back {
      width: 82px;
      height: 26px;
      line-height: 26px;
      box-sizing: border-box;
      text-align: center;
      border: 1px solid #cc7029;
      border-radius: 2px;
      font-size: 12px;
      color: #cc7029;
      background: transparent;
      padding: 0;
      margin-right: 20px;
      &:active {
        background: #cc7029;
        color: #eee;
      }
    }
    .btn-box {
      display: flex;
      align-items: center;
    }
    .filter-time {
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        .txt {
          color: #cc7029;
        }
      }
      .txt {
        font-size: 14px;
        color: #8a8f99;
      }
      .icon-box {
        display: flex;
        flex-direction: column;
        .icon {
          font-size: 12px;
          color: #8a8f99;
          height: 8px;
          line-height: 8px;
          &.active {
            color: #cc7029;
          }
        }
      }
    }
  }
  .item-ul {
    .info-item {
      .name {
        margin-bottom: 10px;
      }
    }
  }
  .search {
    width: 350px;
    height: 34px;
    border: 1px solid #3d434c;
    box-sizing: border-box;
    display: flex;
    input {
      flex: 1;
      padding-left: 10px;
      background: transparent;
      font-size: 14px;
      color: #a1a7b3;
    }
    .icon {
      flex-shrink: 0;
      width: 40px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      font-size: 18px;
      color: #a1a7b3;
      cursor: pointer;
    }
  }
}
.label-list {
  margin-bottom: 5px;
}
</style>
